<!--
* @description 输入框可搜索 组件
!-->

<!-- 单页面需要多个上传组件 -->
<template>
  <div>
    <el-autocomplete
      size="small"
      class="inline-input"
      v-model="value"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="success"
    >
      <template slot-scope="{ item }">
        <div class="name">{{ item }}</div>
      </template>
    </el-autocomplete>
  </div>
</template>
<script>
export default {
  name: "upload",
  props: {
    list: Array,
    limit: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      value: "",
    };
  },
  created() {},
  methods: {
    success(item) {
      this.value = item
      this.$emit("success", item);
    },
    querySearch(queryString, cb) {
      var list = this.list; //查询列表
      var results = queryString
        ? list.filter(this.createFilter(queryString))
        : list;

      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
  },
};
</script>
